/** useEffect 使用 */

import React, { useState, useEffect } from 'react'

export default function HookEffect() {

  let [count, setCount] = useState(0)
  let [name, setName] = useState("damu")
  let [age, setAge] = useState(18)

  // 1. 组件加载时需要执行的代码(componentDidMount)
  // 2. 组件数据更新时需要执行的代码(componentDidUpdate)
  useEffect(() => {
    console.log("HookEffect组件加载 或者数据更新")
  })

  // 3. 监听指定变量
  useEffect(() => {
    console.log("useEffect姓名发生了改变")
  }, [name])

  // 4. 组件卸载时需要执行(componentWillUnmount)
  // 函数式组件如果刷新数据，就得重新执行一遍组件函数
  // 组件数据发生更新，就意味着函数组件经历一次卸载+重新加载过程
  // 类似useState这样的函数就是在函数组件卸载并重新加载时保持数据状态
  useEffect(() => {
    return () => {
      console.log("useEffect 组件准备卸载")
    }
  })


  return (
    <div>
      <h3>3. useEffect</h3>
      <h5>计数器：{count}</h5>
      <div>
        <button onClick={() => setCount(++count)}>增加</button>
        <button onClick={() => setCount(--count)}>减少</button>
      </div>
      <h5>姓名：{name}</h5>
      <div>
        <button onClick={() => setName('大牧')}>修改姓名</button>
      </div>
      <h5>年龄：{age}</h5>
      <div>
        <button onClick={() => setAge(++age)}>修改年龄</button>
      </div>
    </div>
  )
}
